import { Col, Row } from 'antd';
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useParams } from 'react-router'
import { getProductByID } from '../../store/actions/product.action';
import { AppState } from '../../store/reducers';
import { ProductState } from '../../store/reducers/product.reducer';
import Layout from './Layout'
import ProductItem from './ProductItem';

const Product = () => {
    const { productId } = useParams<{productId: string}>()

    const dispatch = useDispatch()
    useEffect(() => {
        dispatch(getProductByID(productId))
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])
    const product = useSelector<AppState, ProductState>(state => state.product)
    return (
        <Layout title='商品信息' subTitle=''>
            <Row>
                <Col span='18'>
                    {
                        product.productByID.loaded && <ProductItem product={product.productByID.result} isShowButtonView={false}/>
                    }
                </Col>
                <Col span='6'>
                    {
                        JSON.stringify(product.productByID)
                    }
                </Col>
            </Row>
        </Layout>
    )
}

export default Product
